
<template>
  <div class="bgff p20" style="min-height:100%;box-sizing:border-box;">
    <div class="custom-tree-container">
      <div class="block" style="width:50%">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
           :default-checked-keys="[1,2,3,4,5,6,7,8]"
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(data)">添加</el-button>
              <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <el-dialog title="新增权限" :visible.sync="dialogFormVisible" >
         <el-form :model="form">
            <el-form-item label="父级" :label-width="formLabelWidth">
                <el-input v-model="form.parent" auto-complete="off" placeholder="请输入父级"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="显示名称" :label-width="formLabelWidth">
                <el-input v-model="form.nick" auto-complete="off" placeholder="显示名称"></el-input>
            </el-form-item>
            <el-form-item label="路由" :label-width="formLabelWidth">
                <el-input v-model="form.route" auto-complete="off" placeholder="路由"></el-input>
            </el-form-item>
            <div class="tx-c">
                <el-button class="mt20" type="primary" size="small" @click="addNode">确定</el-button>
            </div>
         </el-form>
    </el-dialog>
    <el-button class="mt20" type="primary" size="small" @click="updata">提交</el-button>
  </div>
</template>

<script>
  let id = 1000;

  export default {
    data() {
      const data = [
        {
          id: 1,
          label: " 首页",
          children: []
        },
        {
          id: 2,
          label: "工程管理",
          children: []
        },
        {
          id: 3,
          label: "流量检测",
          children: [
            {
              id: 100,
              label: "实时报表"
            }
          ]
        },
        {
          id: 4,
          label: "历史报表",
          children: [
            {
              id: 101,
              label: "历史数据"
            },
            {
              id: 102,
              label: "历史曲线"
            }
          ]
        },
        {
          id: 5,
          label: "报警管理",
          children: [
            {
              id: 103,
              label: "实时报警"
            },
            {
              id: 104,
              label: "报警记录"
            }
          ]
        },
        {
          id: 6,
          label: "监控管理",
          children: [
            {
              id: 105,
              label: "监控地图"
            },
            {
              id: 106,
              label: "监控视频"
            }
          ]
        },
        {
          id: 7,
          label: "用户管理",
          children: [
            {
              id: 107,
              label: "添加用户"
            }
          ]
        },
        {
          id: 8,
          label: "权限管理",
          children: [
            {
              id: 108,
              label: "账户权限"
            },
            {
              id: 109,
              label: "添加账户"
            }
          ]
        }
      ];
      return {
        data: JSON.parse(JSON.stringify(data)),
        dialogFormVisible:false,
        form: {
          name: '',
          parent:'',
          nick:'',
          route:''
        },
        formLabelWidth: '120px',
        sendData:{}
      }
    },

    methods: {
      append(data) {
          this.dialogFormVisible = true;
          console.log(data)
          this.form.parent = data.label;
          this.form.name = '测试test';
          this.form.nick = '测试test';
          this.form.route = '/tests';
          this.sendData = data
        
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      updata(){

      },
      addNode(){
          let data = this.sendData
          const newChild = { id: id++, label: this.form.name, children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
         this.dialogFormVisible = false;
      }
    }
  };
</script>


<style scoped>
 .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

